import * as React from "react"
import { View, Text, ViewStyle, TextStyle } from "react-native"
import { px2dp } from "../../utils"
import { Amountchoice, Button, BottomPopUp } from "../../components"
import { color } from "@/theme"

const styleScreen: ViewStyle = {
  backgroundColor: color.backgroundInnerPage
}

const styleRechargeable: ViewStyle = {
  paddingTop: px2dp(10),
  paddingLeft: px2dp(15),
  paddingRight: px2dp(15)
}

const styleContent: ViewStyle = {
  backgroundColor: color.background,
  borderRadius: px2dp(4),
  paddingHorizontal: px2dp(10),
  paddingVertical: px2dp(15),
  paddingBottom: px2dp(24)
}

const styleBtnView: ViewStyle = {
  alignItems: "center",
  marginTop: px2dp(40),
  paddingBottom: "100%"
}

const styleBtn: ViewStyle = {
  backgroundColor: color.themeColor,
  height: px2dp(50),
  width: px2dp(311)
}

const styleBtnText: TextStyle = {
  color: color.background,
  fontSize: px2dp(18),
  fontWeight: "bold"
}

export interface IsBingdingProps {}

export interface IsBingdingState {}

export default class EnterAmount extends React.Component<IsBingdingProps, IsBingdingState> {
  state = {
    dmountData: null,
    isOpen: false
  }

  public getAmountchoice(value) {
    this.setState({
      dmountData: value
    })
  }

  changeOpne() {
    this.setState({
      isOpen: false
    })
  }

  public render() {
    return (
      <View style={styleScreen}>
        <View style={styleRechargeable}>
          <View style={styleContent}>
            <View style={{ flexDirection: "row" }}>
              <Text style={{ color: color.subtitleText }}>中心钱包</Text>
              <Text style={{ color: color.storybookTextColor, marginLeft: px2dp(15) }}>
                {63.9}元
              </Text>
            </View>
            <View style={{ marginTop: px2dp(20) }}>
              <Text
                style={{ fontSize: px2dp(16), fontWeight: "bold", color: color.storybookTextColor }}
              >
                充值金额
              </Text>
            </View>
            <Amountchoice amountchoiceClick={this.getAmountchoice.bind(this)}></Amountchoice>
          </View>
          <View style={styleBtnView}>
            <Button
              text={"下一步"}
              style={styleBtn}
              textStyle={styleBtnText}
              onPress={() => {
                // alert(this.state.dmountData)
                this.setState({
                  isOpen: true
                })
              }}
            ></Button>
          </View>

          {/* 弹出组件 */}
          <BottomPopUp
            changeOpenClick={this.changeOpne.bind(this)}
            isOpne={this.state.isOpen}
            titleText={"选择银行卡"}
          >
            <View></View>
          </BottomPopUp>
        </View>
      </View>
    )
  }
}
